<template>
  <div class="editor-toolbar">
    <div class="toolbar-left">
      <span class="toolbar-title">脚本编辑器</span>
    </div>
    <div class="toolbar-right">
      <!-- 语言选择 -->
      <el-select 
        v-model="currentLanguage" 
        size="small" 
        style="width: 120px; margin-right: 10px;"
        @change="onLanguageChange"
      >
        <el-option label="Python" value="python" />
        <el-option label="Shell" value="shell" />
        <el-option label="JavaScript" value="javascript" />
      </el-select>

      <!-- 主题选择 -->
      <el-select 
        v-model="currentTheme" 
        size="small" 
        style="width: 140px; margin-right: 10px;"
        @change="onThemeChange"
      >
        <el-option label="Monokai" value="monokai" />
        <el-option label="GitHub" value="github" />
        <el-option label="Tomorrow" value="tomorrow" />
        <el-option label="Twilight" value="twilight" />
        <el-option label="Xcode" value="xcode" />
        <el-option label="Textmate" value="textmate" />
        <el-option label="Solarized Dark" value="solarized_dark" />
        <el-option label="Solarized Light" value="solarized_light" />
        <el-option label="Terminal" value="terminal" />
      </el-select>

      <!-- 字体大小 -->
      <el-select 
        v-model="currentFontSize" 
        size="small" 
        style="width: 80px; margin-right: 10px;"
        @change="onFontSizeChange"
      >
        <el-option label="12px" :value="12" />
        <el-option label="14px" :value="14" />
        <el-option label="16px" :value="16" />
        <el-option label="18px" :value="18" />
        <el-option label="20px" :value="20" />
      </el-select>

      <!-- 模板按钮 -->
      <el-button 
        v-if="currentLanguage === 'python'" 
        size="small" 
        @click="onInsertTemplate('python')"
      >
        Python 模板
      </el-button>
      <el-button 
        v-if="currentLanguage === 'shell'" 
        size="small" 
        @click="onInsertTemplate('shell')"
      >
        Shell 模板
      </el-button>
      <el-button 
        v-if="currentLanguage === 'javascript'" 
        size="small" 
        @click="onInsertTemplate('javascript')"
      >
        JS 模板
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'EditorToolbar',
  props: {
    language: {
      type: String,
      default: 'python'
    },
    theme: {
      type: String,
      default: 'monokai'
    },
    fontSize: {
      type: Number,
      default: 14
    }
  },
  emits: ['language-change', 'theme-change', 'font-size-change', 'insert-template'],
  setup(props, { emit }) {
    const currentLanguage = ref(props.language)
    const currentTheme = ref(props.theme)
    const currentFontSize = ref(props.fontSize)

    // 监听 props 变化
    watch(() => props.language, (newVal) => {
      currentLanguage.value = newVal
    })

    watch(() => props.theme, (newVal) => {
      currentTheme.value = newVal
    })

    watch(() => props.fontSize, (newVal) => {
      currentFontSize.value = newVal
    })

    const onLanguageChange = (value) => {
      emit('language-change', value)
    }

    const onThemeChange = (value) => {
      emit('theme-change', value)
    }

    const onFontSizeChange = (value) => {
      emit('font-size-change', value)
    }

    const onInsertTemplate = (language) => {
      emit('insert-template', language)
    }

    return {
      currentLanguage,
      currentTheme,
      currentFontSize,
      onLanguageChange,
      onThemeChange,
      onFontSizeChange,
      onInsertTemplate
    }
  }
}
</script>

<style scoped>
.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.toolbar-title {
  font-weight: 500;
  color: #606266;
}

.toolbar-right {
  display: flex;
  align-items: center;
}
</style>
